import 'dayjs/locale/zh-cn';
import zh_CN from 'antd/locale/zh_CN';
import { px2remTransformer, StyleProvider } from '@ant-design/cssinjs';
import { message, Modal, type ThemeConfig } from 'antd';

import EmptyPng from '@/assets/images/empty.png';

// --- React18 Profile - 17 17升级18 ---
import ReactDom from 'react-dom';
import ReactDOM from 'react-dom/client';

(ReactDom as any).render = (Comp, node) => {
  // return OldRender(...args)
  ReactDOM.createRoot(node).render(Comp);
};

// --- 根据设备的分辨率设置px ---
const rootPx = 16; // UI的像素尺寸，和外部一致
const px2rem = px2remTransformer({ rootValue: rootPx });
const setPxSize = () => {
  // const fontSize = (window.innerWidth / 1920) * rootPx;
  // document.querySelector('html')!.style.fontSize = `${Math.max(fontSize, 8)}px`;
  document.querySelector('html')!.style.fontSize = '16px';
};
// window.onresize = setPxSize;
setPxSize();

const CustomStyleProvider = (props) => {
  // 自定义样式（modal代理尝试，todo。是否会有全局的影响）
  const [modal, modalContent] = Modal.useModal();
  Object.assign(Modal, modal);

  const [msgApi, messageContent] = message.useMessage();
  Object.assign(message, msgApi);

  return (
    // <StyleProvider transformers={[px2rem]}>
    <>
      {props.children}

      {/* Modal 和 message 样式 */}
      {modalContent}
      {messageContent}
    </>
    // </StyleProvider>
  );
};

// --- 全局样式主题 ---
const theme: ThemeConfig = {
  token: {
    colorPrimary: '#0084FF',
  },
  components: {
    Menu: {
      fontSize: 16,
      itemHeight: 36,
      itemMarginBlock: 10,
      itemMarginInline: 10,
      groupTitleColor: '#5a6274',
      itemColor: '#5a6274',
      itemBg: 'transparent',
      subMenuItemBg: 'transparent',
      itemSelectedBg: 'transparent',
    },
  },
};

// ext 其他的一些全局配置
const renderEmpty = () => {
  return (
    <div className="flex flex-col items-center justify-center">
      <img src={EmptyPng} className="w-full max-w-468px" />
      <div style={{ color: '#9E9E9E' }}>暂无数据</div>
    </div>
  );
};

const ConfigProviderProps = {
  locale: zh_CN,
  theme,
  renderEmpty,
};

export { CustomStyleProvider, ConfigProviderProps };
